<template>
  <div style="height:460px;position: relative;">
    <IEcharts v-if="option.series[0].data.length!==0"
              :option="option" />
    <div style="text-align:center"
         v-else>
      <p><b style="font-size:18px;">不满意件类别统计</b></p>
      <p style="margin-top:60px;">暂无数据</p>
    </div>
  </div>
</template>

<script>
  import IEcharts from 'vue-echarts-v3/src/full.js'
  import _ from 'lodash'

  let echarData = []
  // let _strMax = _.max(echarData.map(item => item.name.length))
  export default {
    components: {
      IEcharts
    },
    props: {
      dateItem: {
        type: String,
        default: ''
      },
      dateList: {
        type: Array,
        default: []
      }
    },
    watch: {
      dateItem: {
        handler (newValue, oldValue) {
          if (newValue !== oldValue) {
            if (newValue) {
              // console.log('cao1')
              this.dateType = 'i'
              this.getData()
            }

          }
        },
        deep: true
      },
      dateList: {
        handler (newValue, oldValue) {
          if (newValue !== oldValue) {
            if (newValue.length !== 0) {
              this.dateType = 'd'
              this.getData()
              // console.log('cao2')
            }

          }
        },
        immediate: true,
        deep: true
      },
    },
    data () {
      return {
        option: {
          title: {
            text: '热点问题统计Top5',
            x: 'center'
          },
          color: ['#37a2da', '#32c5e9', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378ea'],
          grid: {
            left: '20%',
            right: '25%',
            top: '200px',
            bottom: '50px',
            containLabel: false
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: '20%',
            top: 'center',
            itemGap: 20,
            selectedMode: true,
            // icon: 'pin',
            formatter: (name) => {
              let _str = ''
              echarData.forEach(item => {
                if (name === item.name) {
                  _str = '{name|' + item.name + '：}{value|' +
                    item.value + '}'
                }
              })
              return _str
            },
            textStyle: {
              rich: {
                name: {
                  fontSize: 16,
                  width: '',
                  align: 'left',
                },
                value: {
                  width: 80,
                  align: 'right',
                  fontSize: 18,
                  fontWeight: 'bold',
                  color: '#333333'
                }
              }
            }
          },
          series: [
            {
              name: '业务警种',
              type: 'pie',
              radius: [110, 150],
              center: ['35%', '50%'],
              avoidLabelOverlap: false,
              hoverAnimation: false,
              data: [],
              label: {
                show: false,
                position: 'center'
              },
            }
          ]
        }
      }
    },
    created () {
      this.getData()
    },
    methods: {
      getData () {
        let cont = {
          dateItem: this.dateItem,
          dateList: this.dateList,
          dateType: this.dateType,
        }
        this.$axios.post(this.$api.countCharts.satisfactionCategoryCharts, cont).then(res => {
          if (res) {
            // console.log(res, 6666)
            this.option.series[0].data = [
              {
                name: '文旅体处-旅游纠纷',
                value: 50
              },
              {
                name: '执法大队-劳动纠纷',
                value: 40
              },
              {
                name: '教育处-教学质量',
                value: 30
              },
              {
                name: '卫健处-疾病预防控制',
                value: 20
              },
              {
                name: '教育处-招生入学',
                value: 20
              },
            ]
            // this.option.series[0].data = res.category.map(
            //   item => {
            //     return { 'name': item.name, 'value': item.value }
            //   }
            // )
            echarData = this.option.series[0].data
            let _strMax = _.max(echarData.map(item => item.name.length))
            this.option.legend.textStyle.rich.name.width = _strMax * 15
          }
        })
      }
    }
  }
</script>

<style>
</style>
